import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid, Brush, AreaChart, Area, Label} from 'recharts';
import data from '../out/sync-data'
import numeral from 'numeral';

const MEMLIMIT = 3 * 1000 ** 3;

export default class App extends Component {
  static propTypes = {
    params: PropTypes.object,
    location: PropTypes.object,
  };

  render() {
    return (
      <LineChart width={1200} height={400} data={data} margin={{top: 40, right: 40, bottom: 20, left: 20}} style={{fontSize: '11px'}}>
        <CartesianGrid vertical={false}/>
        <XAxis axisLine={false} tickLine={false} dataKey='time' unit='s'/>
        <YAxis axisLine={false} tickLine={false} type='number' stroke='#ff9f00' yAxisId={'cpu'} domain={[0, 200]} tickFormatter={formatCpu}>
          <Label angle={270} stroke='#ff9f00' position='left' style={{textAnchor: 'middle'}}>
            CPU Occupancy
          </Label>
        </YAxis>
        <YAxis axisLine={false} tickLine={false} type='number' stroke='#009e73' yAxisId={'memory'} domain={[0, MEMLIMIT]} tickFormatter={formatMem} orientation='right' >
          <Label angle={90} stroke='#009e73' position='right' style={{textAnchor: 'middle'}}>
            Memory Storage
          </Label>
        </YAxis>
        <Tooltip
          formatter={formatTt}
          labelFormatter={formatTime}
          labelStyle={{fontSize: '11px', color: '#666666'}}
          contentStyle={{fontSize: '11px', backgroundColor: 'rgba(255, 255, 255, 0.8)'}}
          wrapperStyle={{
            borderColor: 'white',
            boxShadow: '2px 2px 3px 0px rgb(204, 204, 204)',
          }}
        />
        <Line stroke='#ff9f00' dot={false} type='monotone' yAxisId={'cpu'} dataKey='cpu'/>
        <Line stroke='#009e73' dot={false} type='monotone' yAxisId={'memory'} dataKey='memory'/>
        <Brush dataKey='time' startIndex={0}>
          <AreaChart>
            <CartesianGrid/>
            <YAxis hide yAxisId={'cpu'} domain={[0, 200]}/>
            <YAxis hide yAxisId={'memory'} domain={[0, MEMLIMIT]}/>
            <Area stroke='#ff9f00' fill='#ff9f00' dot={false} dataKey='cpu' yAxisId='cpu'/>
            <Area stroke='#009e73' fill='#009e73' dot={false} dataKey='memory' yAxisId='memory'/>
          </AreaChart>
        </Brush>
      </LineChart>
    );
  }
}

function formatTime(value) {
  return 'No.' + value + ' second'
}

function formatMem(value) {
  return numeral(value).format('0.00b');
}

function formatCpu(value) {
  return value + '%'
}

function formatTt(value, name, props) {
  switch (name) {
    case 'cpu':
      return formatCpu(value);
    case 'memory':
      return formatMem(value);
  }
}
